<template>
  <div class="mainContent">
      <div class="bot com">
        <el-table
          ref="filterTable"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="orderNo"
            label="订单号"
          >
          </el-table-column>
          <el-table-column
            prop="packageName"
            label="购买版本"
           >
          </el-table-column>
          <el-table-column
            prop="taskPrice"
            label="金额"
            >
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="提交时间"
            >
          </el-table-column>
          <el-table-column
            prop="payType"
            label="支付方式"
            >
            <template slot-scope="scope">
              <el-link type="success" v-if="scope.row.payType == 0">微信</el-link>
              <el-link type="primary" v-if="scope.row.payType == 1">支付宝</el-link>
              <el-link type="warning" v-if="scope.row.payType == -99">未支付</el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="taskStatus"
            label="订单状态"
           >
            <template slot-scope="scope">
              <el-link type="success" v-if="scope.row.taskStatus == 10">{{ scope.row.taskStatusName }}</el-link>
              <el-button type="danger" v-if="scope.row.taskStatus == 0" @click="goPay(scope.row)">{{ scope.row.taskStatusName }}</el-button>
              <el-link type="warning" v-if="scope.row.taskStatus == -2">支付失败</el-link>
              <!-- <el-link type="success" v-if="scope.row.taskStatus == 10">{{ scope.row.taskStatusName }}</el-link> -->
              <!-- <el-link type="success" v-if="scope.row.taskStatus == 10">正在派单</el-link>
              <el-link type="success" v-if="scope.row.taskStatus == 20">已完成</el-link> -->
              <!-- <span v-if="scope.row.taskStatus == 10">正在派单</span>
              <span v-if="scope.row.taskStatus == 20">已完成</span>
              <span v-if="scope.row.taskStatus == -2">支付失败</span>
              <el-button type="danger" v-if="scope.row.taskStatus == 0" @click="goPay(scope.row)">{{ scope.row.taskStatusName }}</el-button> -->
              <!-- <el-link type="warning" v-if="scope.row.taskStatus == -2">支付失败</el-link> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
       background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="now"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pagesize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
      </div>
      <clientBtn></clientBtn>
  </div>
</template>

<script>
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    return {
      pagesize:5,
      total:10,
      now:1,
      tableData: [
        // {
        //   id: 1,
        //   ddh: 123456789,
        //   gmbb:"大师版",
        //   hfsl:50,
        //   fbsj:"2019-10-01",
        //   ckxq:""
        // },
        //  {
        //   id: 2,
        //   ddh: 123456789,
        //   gmbb:"精英版",
        //   hfsl:50,
        //   fbsj:"2019-10-01",
        //   ckxq:""
        // },
        //  {
        //   id: 3,
        //   ddh: 123456789,
        //   gmbb:"",
        //   hfsl:50,
        //   fbsj:"2019-10-01",
        //   ckxq:""
        // },
        //  {
        //   id: 4,
        //   ddh: 123456789,
        //   gmbb:"",
        //   hfsl:50,
        //   fbsj:"2019-10-01",
        //   ckxq:""
        // },
      ],
      tableDatas: [
        // {
        //   ddh:1234,
        //   gmbb:"大师版",
        //   je:"￥1000",
        //   tjsj:2019-10-10,
        //   zffs:"微信",
        //   ddjy:1,
        // },
        // {
        //   ddh:1234,
        //   gmbb:"精英版",
        //   je:"￥1000",
        //   tjsj:2019-10-10,
        //   zffs:"微信",
        //   ddjy:0,
        // },
        // {
        //   ddh:1234,
        //   gmbb:"水货版",
        //   je:"￥1000",
        //   tjsj:2019-10-10,
        //   zffs:"支付宝",
        //   ddjy:1,
        // },
      ]
    }
  },
  methods: {
    postMes(val){
      console.log(val)
                    
                    var obj = {
                      sex:val.sex,
                      firstName:val.firstName,
                      bornStatus:val.bornStatus,
                      bornTime:val.bornTime ,
                      bornArea:val.bornArea,
                      nameLength:val.nameLength,
                      fixChar:val.fixChar,
                      fixPos:val.fixPos,
                      fatherName:val.fatherName,
                      motherName:val.motherName,
                      motherName:val.motherName,
					  memo:val.memo,
					  files: val.files
                    }
                    sessionStorage.setItem("obj",JSON.stringify(obj));
                    setTimeout(()=>{
                      this.$router.push("/qiming/payment");
                    },100)
                     
                },
    goPay(val){
     this.postMes(val);
    },
    handleSizeChange(val) {
      this.pageSize = val;
        this.init()
        
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.init()
       
      },
    init(){
      this.$ajax.post("/userTask/listLimit",{
        pageIndex:this.now,
        pageSize:this.pagesize
      })
      .then(res =>{
        res.data.data.list.forEach(item=>{
          item.taskPrice = item.taskPrice/100
        })
        
         this.tableData = res.data.data.list;
         this.total = res.data.data.total;
      })
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  created(){
    this.init()
  },
  mounted () {
    _MEIQIA('hidePanel');
  }
}
</script>

<style lang="scss" scoped>
  .mainContent{
    .com{
      padding: 40px 48px;
      border-radius: 5px;
      background: #fff;
      margin-bottom: 50px;
    }
  }
  @media screen and (max-width: 750px){
    .mainContent{
      .com{
        padding: 20px 10px;
      }
    }
  }
</style>